<wide-header-page title="{{'New contact'|translate}}">
  <ion-buttons right>
    <button clear wide-header-bar-button (click)="save()" ion-button [disabled]="addressBookAdd.invalid">
      <span translate>Add</span>
    </button>
  </ion-buttons>
  <div page-content>

    <form [formGroup]="addressBookAdd">
      <ion-item>
        <ion-label stacked>{{ 'Name' | translate }}</ion-label>
        <ion-input formControlName="name" type="text"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label stacked>{{ 'Email (optional)' | translate }}</ion-label>
        <ion-input formControlName="email" type="email"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label stacked>{{ 'Address' | translate }}</ion-label>
        <ion-input formControlName="address" type="text" [value]="addressBookAdd.value.address" address-validator></ion-input>

        <ion-icon *ngIf="addressBookAdd.controls['address'].status == 'VALID'" name="ios-checkmark-circle" class="check success" item-right></ion-icon>
        <ion-icon *ngIf="addressBookAdd.value.address && addressBookAdd.controls['address'].status == 'INVALID'" class="check fail" name="ios-close-circle" item-right></ion-icon>

        <ion-icon class="scanner-icon" name="qr-scanner" item-right (click)="openScanner()"></ion-icon>
      </ion-item>

      <ion-item *ngIf="addressBookAdd.value.address && getCoinAndNetwork() && getCoinAndNetwork().coin === 'xrp'">
        <ion-label stacked>{{ 'Destination Tag' | translate }}</ion-label>
        <ion-input formControlName="tag" type="number" [value]="addressBookAdd.value.tag"></ion-input>

        <ion-icon *ngIf="addressBookAdd.value.tag && addressBookAdd.controls['tag'].status == 'VALID'" name="ios-checkmark-circle" class="check success" item-right></ion-icon>
        <ion-icon *ngIf="addressBookAdd.value.tag && addressBookAdd.controls['tag'].status == 'INVALID'" class="check fail" name="ios-close-circle" item-right></ion-icon>

        <ion-icon class="scanner-icon" name="qr-scanner" item-right (click)="openScanner()"></ion-icon>
      </ion-item>
      <label-tip type="info" header="no-header" *ngIf="addressBookAdd.value.address && getCoinAndNetwork() && getCoinAndNetwork().coin === 'xrp'">
        <div label-tip-body>
          <span translate>BitPay cannot validate the destination tag. Before sending XRP please double-check the destination tag with the receiver, if not valid it may result in the permanent loss of the funds.</span>
        </div>
      </label-tip>

      <label-tip type="danger" header="no-header" *ngIf="addressBookAdd.value.address && addressBookAdd.controls['address'].status == 'INVALID'">
        <div label-tip-body>
          <span>{{'This field only accepts addresses supported by {appName} Wallet' | translate:{appName: appName} }}</span>
        </div>
      </label-tip>
    </form>
  </div>
</wide-header-page>